<template>
  <div class="filter-form bg-blue-50" style="padding: 8px 10px">
    <ArkForm ref="form" v-model:options="options" class="flex-1">
      <template v-for="(slot, slotName) in $slots" #[slotName]="slotProps">
        <slot :name="slotName" v-bind="slotProps"/>
      </template>
    </ArkForm>

    <div class="shrink-0 items-start flex flex-col gap-2">
      <div
        class="filter-form-operation filter-form-operation--primary mt-0.5"
        v-if="showAction(options?.actions?.confirm)"
        @click="onSearchClick"
        v-bind="options.actions?.confirm?.attributes ? options.actions?.confirm?.attributes : {}"
        v-on="options.actions?.confirm?.events ? options.actions?.confirm?.events : {}"
      >
        <el-icon>
          <Search/>
        </el-icon>

        {{
          options.actions.confirm?.text ? options.actions.confirm.text : "查询"
        }}
      </div>

      <div
        class="filter-form-operation"
        v-if="showAction(options?.actions?.clear)"
        @click="onClearClick"
        v-bind="options.actions?.clear?.attributes ? options.actions?.clear?.attributes : {}"
        v-on="options.actions?.clear?.events ? options.actions?.clear?.events : {}"
      >
        <el-icon>
          <Close/>
        </el-icon>

        {{
          options.actions.clear?.text ? options.actions.clear.text : "清除"
        }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, type PropType, useTemplateRef,} from "vue";
import _ from "lodash";
import ArkFilterFormOptionsDefault, {ArkFilterFormOptions} from "./ArkFilterFormOptions";
import {ArkActionButton} from "../../common-type/ark-action-button";
import ArkForm from "../../common/ark-form/ArkForm.vue";

/** 接口（组件的接口）。包括：defineOptions、defineModel、defineProps、defineEmits、defineExpose、defineSlots */
const options = defineModel("options", {
  type: Object as PropType<ArkFilterFormOptions>,
  default: () => ArkFilterFormOptionsDefault
});

/** 本地状态 (本地的响应式 property)。包括：ref、computed */
const formRef = useTemplateRef('form')

/** 事件（通过响应式事件触发的回调）。包括：watch */

/** 生命周期钩子（按照它们被调用的顺序）。包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted */
onBeforeMount(() => {
  init();
});

/** 非响应式的 property (不依赖响应系统的实例 property)。包括：常规函数 */
const init = () => {
  _.defaultsDeep(options.value, ArkFilterFormOptionsDefault);

  options.value.onFormItemEnter = onSearchClick;
};

const showAction = (actionObj: ArkActionButton<any>) => {
  if (_.isNil(actionObj)) {
    return true;
  }

  if (_.isNil(actionObj.show)) {
    return true;
  }

  return actionObj.show;
};

const onSearchClick = async () => {
  await formRef.value.validate();

  const buttonObj: ArkActionButton<any> = options.value.actions?.confirm;
  if (_.isNil(buttonObj)) {
    return;
  }

  if (typeof buttonObj.beforeClick === "function") {
    const beforeClickReturnVal = buttonObj.beforeClick();
    if (!_.isNil(beforeClickReturnVal)) {
      if (typeof beforeClickReturnVal === "boolean" && !beforeClickReturnVal) {
        return;
      }

      await beforeClickReturnVal;
    }
  }

  if (!_.isNil(buttonObj.onClick)) {
    const params = options.value.model;
    const returnVal = buttonObj.onClick(params);

    if (!_.isNil(buttonObj.afterClick)) {
      buttonObj.afterClick(returnVal);
    }

    if (returnVal instanceof Promise) {
      await returnVal;
    }

    return;
  }

  if (!_.isNil(buttonObj.afterClick)) {
    buttonObj.afterClick();
  }
};
const onClearClick = async () => {
  const buttonObj: ArkActionButton<any> = options.value.actions?.clear;
  if (_.isNil(buttonObj)) {
    return;
  }

  if (typeof buttonObj.beforeClick === "function") {
    const beforeClickReturnVal = buttonObj.beforeClick();
    if (!_.isNil(beforeClickReturnVal)) {
      if (typeof beforeClickReturnVal === "boolean" && !beforeClickReturnVal) {
        return;
      }

      await beforeClickReturnVal;
    }
  }

  if (!_.isNil(buttonObj.onClick)) {
    const returnVal = buttonObj.onClick();

    if (!_.isNil(buttonObj.afterClick)) {
      buttonObj.afterClick(returnVal);
    }

    if (_.isNil(returnVal)) {
      formRef.value.reset();
      await onSearchClick();
      return;
    }

    if (typeof returnVal === "boolean") {
      if (returnVal) {
        formRef.value.reset();
        await onSearchClick();
      }
      return;
    }

    await returnVal;
    formRef.value.reset();
    await onSearchClick();
    return;
  }

  if (!_.isNil(buttonObj.afterClick)) {
    buttonObj.afterClick();
  }
};

/** 其它 */
</script>

<style scoped lang="scss">
.filter-form {
  display: flex;
  column-gap: 8px;
  background-color: #fcfcfc;
  //background-color: rgba(118,118,128,0.12);
}

.filter-form-operation {
  padding: 2px 10px;
  border-radius: 4px;
  color: #606266;
  border: 1px solid rgba(118, 118, 128, 0.12);
  cursor: pointer;
  display: flex;
  justify-items: center;
  align-items: center;
  column-gap: 8px;
  background-color: rgba(116, 116, 128, 0.02);

  &--primary {
    background-color: #409eff;
    color: #ffffff;
  }
}
</style>
